<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The Dept Page</title>
</head>
<body>
<div id="app">
    <h1>The Dept Page</h1>
    <table>
        <thread>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>资源</th>
            </tr>
        </thread>

        <tbody>
        <tr v-for="d in dept">
            <td>{{d.deptno}}</td>
            <td>{{d.dname}}</td>
            <td>{{d.dbSource}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({//vue对象时vue.js应用的入口对象
        el: "#app",//vue对象要监控的区域
        data: {//此对象用于同步页面数据的一个对象
            dept: {}
        },
        methods: {//同步与页面元素事件处理函数
            findAll: function () {
                let url = "dept/findAll";
                axios.get(url).then(function (result) {
                    this.vm.dept = result.data;
                });
            }
        },
        mounted: function () {
            this.findAll();
        }
    });
</script>
</body>
</html>
